<template>
    <div id="account">

        <h3>单据编码规则</h3>
        <div>
            <div style="float: right;">
                <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
                <el-button type="primary">删除</el-button>
            </div>
        </div>
        <div style="clear: both;"></div>
        <hr style="margin-top: 10px">
        <div class="account-content" style="margin-top: 10px;">
            <el-table height="500px" :data="accounts" border style="width: 100%;font-size: 13px;margin-left: 20px;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="accountName" label="单据类型" width="200">
                </el-table-column>
                <el-table-column prop="accountName" label="规则名称" width="200">
                </el-table-column>
                <el-table-column prop="accountName" label="编号规则" width="200">
                </el-table-column>
                <el-table-column prop="accountName" label="编号位数" width="200">
                </el-table-column>
                <el-table-column prop="accountName" label="起始编号" width="200">
                </el-table-column>
                <el-table-column prop="accountName" label="默认状态" width="200">
                </el-table-column>

                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination style="position: relative;left: 700px;bottom: 30px;" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]"
            :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
        <el-dialog width="800px" top="100px" title="新增单据编码规则" :visible.sync="dialogFormVisible">
            <AddRules />
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import AddAccount from './AddAccount.vue';
import AddCustomerType from './AddCustomerType.vue';
import AddOut from './AddOut.vue';
import AddPayType from './AddPayType.vue';
import AddProviderType from './AddProviderType.vue';
import AddRules from './AddRules.vue';

export default {
    name: 'Account',
    components: {
        AddAccount,
        AddProviderType,
        AddRules
    },
    data() {
        return {
            dialogFormVisible: false,
            //分页参数
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            accounts: [
                {
                    accountCode: 'test1',
                    accountName: 'test1',
                    presentMoney: '1',
                    isDefault: '',
                    accountDate: '',
                    aTypeId: '',
                    status: '1'
                },
                {
                    accountCode: 'test1',
                    accountName: 'test1',
                    presentMoney: '1',
                    isDefault: '',
                    accountDate: '',
                    aTypeId: '',
                    status: '1'
                },
            ]
        }

    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style scoped>
#account {
    width: 100%;
    height: 100%;
}

.account-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.account-top h3 {
    display: inline-block;
    margin-right: 1000px;
}

.account-content {
    width: 100%;
    height: calc(100% - 60px);
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}
</style>